<!-- 活动首页 -->
<template>
	<view class="content">
		<Header desc="Application" page-name="活动报名"/>
		<view class="grid activity-container">
			<!-- 活动类目 -->
			<Menus :list="typeList" v-model:type-id="typeId" />
			<!--列表-->
			<ActivityList :list="activityList" custom-style="activity"/>
		</view>
		<FooterBar :tab-index="0"/>
	</view>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import Header from "@/components/Header/HomeHeader.vue";
	import FooterBar from "@/components/FooterBar/index.vue";
	import Menus from "./components/Menus.vue";
	import ActivityList from "@/components/List/Activity.vue";
	import {onReachBottom } from "@dcloudio/uni-app";
	import { getTypeList,getActList } from "@/server/api.js";
	import { ref, watch } from "vue";
	
	const activityList = ref([]);
	let typeList = ref([]);
	let typeId = ref(0);
	let pages = ref({
		current: 1,
		isLoad: true
	})
	
	watch(typeId,val=>{
		pages.value = {
			current: 1,
			isLoad: true
		}
		getActData()
	})
	
	let getActData = (type)=>{
		console.log(type)
		getActList({
			actTypeId: typeId.value,
			current: pages.value.current,
			size: 20,
		}).then(res=>{
			if(pages.value.current == 1) {
				activityList.value = res.data.records
			} else {
				activityList.value = [...activityList.value,...res.data.records]
			}
			pages.value = {
				current: pages.value.current + 1,
				isLoad: res.data.records.length != 0
			}
		})
	}
	
	
	let getTypeData = ()=>{
		getTypeList().then(res=>{
			let list = res.data.filter(item=>{
				return item.isList
			})
			typeList.value = list;
			typeId.value = list[0].id;
			activityList.value = [];
			pages.value = {
				current: 1,
				isLoad: true
			}
			// getActData('8888')
		})
	}
	onLoad(()=>{
		getTypeData();
	})
	onReachBottom(()=>{
		if(!pages.value.isLoad) return;
		getActData('9999');
	})
</script>

<style lang="scss" scoped>
	.content {
		padding: 40rpx 20rpx 80rpx;
	}
	.activity-container {
		padding-bottom: 400rpx;
	}
</style>
